<script setup lang="ts">
import type { CascaderOption, SelectRenderLabel, SelectRenderTag } from 'naive-ui'
import { NAvatar, NButton, NTag, NText } from 'naive-ui'
import { h, ref } from 'vue'
// TODO 这里用在两个地方了，注意修改
const songs = ref([
  {
    value: 'Rock\'n\'Roll Star',
    label: 'Rock\'n\'Roll Star',
  },
  {
    value: 'Shakermaker',
    label: 'Shakermaker',
  },
  {
    value: 'Live Forever',
    label: 'Live Forever',
  },
  {
    value: 'Up in the Sky',
    label: 'Up in the Sky',
  },
],
)

const showStatusSetting = ref(false)

const renderLabel: SelectRenderLabel = (option) => {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        alignItems: 'center',
      },
    },
    [
      h(NAvatar, {
        src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
        round: true,
        size: 'small',
      }),
      h(
        'div',
        {
          style: {
            marginLeft: '12px',
            padding: '4px 0',
          },
        },
        [
          h('div', null, [option.label as string]),
          h(
            NText,
            { depth: 3, tag: 'div' },
            {
              default: () => 'description',
            },
          ),
        ],
      ),
    ],
  )
}

const renderMultipleSelectTag: SelectRenderTag = ({
  option,
  handleClose,
}) => {
  return h(
    NTag,
    {
      style: {
        padding: '0 6px 0 4px',
      },
      round: true,
      closable: true,
      onClose: (e) => {
        e.stopPropagation()
        handleClose()
      },
    },
    {
      default: () =>
        h(
          'div',
          {
            style: {
              display: 'flex',
              alignItems: 'center',
            },
          },
          [
            h(NAvatar, {
              src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
              round: true,
              size: 22,
              style: {
                marginRight: '4px',
              },
            }),
            option.label as string,
          ],
        ),
    },
  )
}

function getOptions(depth = 2, iterator = 1, prefix = '') {
  const length = 12
  const options: CascaderOption[] = []
  for (let i = 1; i <= length; ++i) {
    if (iterator === 1) {
      options.push({
        value: `${i}`,
        label: `${i}`,
        disabled: i % 5 === 0,
        children: getOptions(depth, iterator + 1, `${String(i)}`),
      })
    }
    else if (iterator === depth) {
      options.push({
        value: `${prefix}-${i}`,
        label: `${prefix}-${i}`,
        disabled: i % 5 === 0,
      })
    }
    else {
      options.push({
        value: `${prefix}-${i}`,
        label: `${prefix}-${i}`,
        disabled: i % 5 === 0,
        children: getOptions(depth, iterator + 1, `${prefix}-${i}`),
      })
    }
  }
  return options
}
const options = ref(getOptions())
</script>

<template>
  <div class="container">
    <div
      style="display: flex;flex-direction: row;justify-content: space-between; margin-top: 10px;margin-left: 10px;margin-right: 10px;"
    >
      <n-space>
        <NButton>
          待处理
        </NButton>
        <NButton>
          进行中
        </NButton>
        <NButton>
          待测试
        </NButton>
        <NButton>
          待验收
        </NButton>
      </n-space>

      <n-space>
        <NButton>
          保存
        </NButton>
        <NButton>
          还原
        </NButton>
        <NButton type="error">
          删除
        </NButton>
      </n-space>
    </div>
    <div style="height: 1px;background-color: rgb(239, 239, 245);width: 100%" class="mt-10" />
    <!--    <n-divider style="background-color: red"/> -->

    <!-- 具体流程 -->
    <div style="display: flex;flex-direction: row;">
      <!-- 左侧 -->
      <div style="display: flex;flex-direction: column;width: 240px;" class="left-bar">
        <div style="line-height: 58px;padding-left: 30px">
          配置项
        </div>
        <div>
          <div class="left-config-item">
            <span>
              开始状态
            </span>
            <div>新建任务默认状态</div>
          </div>

          <div class="left-config-item">
            <div style="font-weight: 600">
              进行中状态
            </div>
            <div>进行中状态</div>
          </div>

          <div class="left-config-item">
            <div style="font-weight: 600">
              验收状态
            </div>
            <div>验收中状态</div>
          </div>

          <div class="left-config-item">
            <div style="font-weight: 600">
              完成状态
            </div>
            <div>完成状态</div>
          </div>
        </div>

        <n-divider />

        <div style="background:white;padding-left: 30px">
          <div class="common-line-height">
            可流转到
          </div>
        </div>
        <div style="background:white;padding-left: 30px">
          <div class="common-line-height">
            待处理
          </div>
        </div>

        <div style="background:white;padding-left: 30px">
          <div class="common-line-height">
            进行中
          </div>
        </div>
      </div>

      <!-- 右侧 -->
      <div style="display: flex;flex-direction: row;">
        <div class="status-item-box">
          <div class="status-item-title">
            <span>待处理</span>
            <NButton text class="right-btn" @click="showStatusSetting = true">
              <template #icon>
                <i class="i-fe:more-horizontal" size="36" />
              </template>
            </NButton>
          </div>
          <n-radio-group v-model:value="value" name="radiogroup" style=" display: flex;flex-direction: column">
            <n-radio
              v-for="song in songs" :key="song.value" :value="song.value"
              style="height: 50px;display: flex;flex-direction: column;justify-content: center"
            >
              <!--              {{ song.label }} -->
            </n-radio>
          </n-radio-group>

          <div>
            <div class="common-line-height">
              <n-checkbox value="Beijing2" label="" />
            </div>

            <div class="common-line-height">
              <n-checkbox value="Beijing" label="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 状态设置页面 -->
    <n-modal v-model:show="showStatusSetting" preset="card" class="common-modal" style="max-width: 600px">
      <template #header>
        状态设置
      </template>

      <span style="flex: none;font-size: 16px;font-weight: 500">状态负责人</span>

      <div class="container" style="padding: 20px;margin-top: 5px">
        <div style="display: flex; width: 100%;align-items: center;">
          <span style="flex: none">⠀项目成员：</span>
          <n-select
            multiple
            :options="options"
            :render-label="renderLabel"
            :render-tag="renderMultipleSelectTag"
          />
        </div>

        <div style="display: flex; width: 100%;align-items: center; padding-top: 20px;">
          <span style="flex: none">⠀流转模式：</span>
          <n-radio-group v-model:value="value" name="radiogroup">
            <n-space>
              <n-radio v-for="song in songs" :key="song.value" :value="song.value">
                {{ song.label }}
              </n-radio>
            </n-space>
          </n-radio-group>
        </div>

        <div style="display: flex; width: 100%;align-items: center; padding-top: 8px;">
          <span style="flex: none">ㅤ ㅤ ㅤ ㅤ ㅤ </span>
          <span style="flex: none;color: #94a3b8;margin-left: 5px">流转模式说明</span>
        </div>
      </div>

      <n-space style="justify-content: right;align-items: center" class="mr-10 mt-15">
        <NButton>
          取消
        </NButton>
        <NButton type="primary">
          保存
        </NButton>
      </n-space>
    </n-modal>
  </div>
</template>

<style scoped>
.common-line-height {
  line-height: 58px;
}

.container {
  border: 1px solid rgb(239, 239, 245);
  border-radius: 6px;
}

.left-bar {
  border-top: 0; /* 上边框隐藏 */
  border-bottom: 0; /* 下边框隐藏 */
  border-left: 0; /* 左边框隐藏 */
  border-right: 1px solid rgb(239, 239, 245); /* 仅设置右边框 */
  border-radius: 0 0 0 0; /* 仅对右侧的角设置圆角 */
}

.left-config-item {
  height: 50px;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.left-config-item span {
  font-weight: 600;
}

.status-item-title {
  border: 1px solid rgb(239, 239, 245);
  border-radius: 8px;
  width: 80%;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  line-height: 40px;
  margin-top: 10px;
}

.status-item-title span {
  flex-grow: 1; /* 使 span 占据剩余空间 */
  text-align: center; /* 文本居中 */
}

.status-item-title .right-btn {
  margin-right: 10px; /* NButton 距离右边 10 像素 */
}

.status-item-box {
  display: flex;
  flex-direction: column;
  width: 240px;
  align-items: center;
  margin: 10px;
  border: 1px solid rgb(239, 239, 245);
  border-radius: 8px;
}
</style>
